<template>
	<view >
		<view class="list-block" @click="pull">
			<view class="list-left">
				<label v-if="!isPull"
				class="iconfont iconsanjiaoxing"></label>
				<label v-else="isPull"
				class="iconfont iconsanjiaoxing1"></label>
				<text>{{name}}</text>
			</view>
			<view class="list-right">
				{{list.length}}/{{list.length}}
			</view>
		</view>	
		
		<view v-if="isPull">
			<view class="friend-block" v-for="(friend, index) in list" :key=index @click="goMessage(friend)">
				<image :src="friend.headPic" mode="" class="friend-pic"></image>
				<view class="friend-details">
					<view class="friend-name">
						{{friend.nickName}}
					</view>
					<view class="friend-status omit">
						<!-- [{{friend.status}}] -->
						<text v-if="friend.status == 0">[离线]</text>
						<text v-else="friend.status == 1">[手机在线]</text>
						<!-- <text v-else-if="friend.status == 2">[隐身]</text> -->
						<!-- <text v-else>[已销户]</text> -->
						<label class="iconfont icon-wujiaoxing"></label>
						<!-- {{friend.detail}} -->
						<text>今天又是一个晴天哈哈哈哈哈红红火火恍恍惚惚</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
	
	
</template>

<script>
	export default {
		data() {
			return {
				isPull: false,
			}
		},
		props: {
			name: String,
			list: Array
		},
		methods: {
			// 跳转用户详情页面
			goMessage(friend){
				// 这里跳转路径是相对使用组件的页面来写
				var userInfo = uni.getStorageSync("userInfo")
				// 判断是自己还有好友
				if(friend.id == userInfo.id){
					// 自己
					uni.navigateTo({
						url:'../../pages/user/userDetails/myDetails',
						animationType: 'pop-in',
						animationDuration: 200
					})
				}else{
					// 好友
					uni.navigateTo({
						url:'../../pages/user/userDetails/friendDetails?friendId='+friend.id,
						animationType: 'pop-in',
						animationDuration: 200
					})
				}
				
			},
			pull() {
				this.isPull = !this.isPull
			}
		}
	}
</script>

<style>
	.list-block {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 15rpx 20rpx;
		height: 85rpx;
		line-height: 85rpx;
		font-size: 17px;
	}
	
	.list-right {
		font-size: 12px;
		color: #7a7c74;
	}
	
	.iconsanjiaoxing {
		font-size: 10px;
		margin-right: 15rpx;
		margin-bottom: 25rpx;
		color: #d6d6d6;
	}
	.iconsanjiaoxing1 {
		font-size: 10px;
		margin-right: 15rpx;
		margin-bottom: 25rpx;
		color: #d6d6d6;
	}
	
	.friend-block {
		height: 120rpx;
		margin: 20rpx 20rpx 20rpx 50rpx;
		display: flex;
		flex-direction: row;
	}
	
	.friend-pic {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	.friend-status {
		width: 550rpx;
		font-size: 12px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.icon-wujiaoxing {
		color: #f9ec2f;
	}
</style>
